<template>
  <!-- 定义一个宽高的DOM -->
  <div ref='chart' style="width:600px;height:260px;"></div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import * as Charts from 'echarts'
export default {
setup(){
    const chart = ref()
    const data = reactive({
    })
    onMounted(()=>{
        init()
    })
    function init(){
        var myChart = Charts.init(chart.value)
        var option = {
        yAxis: {
            type: 'category',
            inverse: true,
            offset: 0,
            axisLabel: {
                show: true,
                interval: 'auto',
                color: 'rgb(106, 148, 255)',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            data: ['化妆品', '电子产品', '书籍', '生活用品', '其他'],
        },
        xAxis: {
            type: 'value',
            offset: 10,
            axisLine: {
                show: false,
                lineStyle:false
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: true,
                inside: true,
                length: 10,
            },
            axisLabel: {
                show: false
            },
        },
        series: [
            {
                // 上半截柱子
                name: '2019',
                type: 'bar',
                barWidth: '20',
                barGap: '-200%',
                z: 0,
                itemStyle: {
                    //lenged文本
                    opacity: 1,
                    color: function (params) {
                        return new Charts.graphic.LinearGradient(
                            0,
                            0,
                            1,
                            0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(207, 235, 255)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(228, 242, 255)', // 100% 处的颜色
                                },
                            ],
                            false
                        );
                    },
                },
                data: [50, 50, 50, 50, 50],
            },
            {
                //最右圆片
                name: '',
                type: 'pictorialBar',
                symbolSize: [10, 20],
                symbolOffset: [5, 0],
                z: 3,
                symbolPosition: 'end',
                itemStyle: {
                    color: 'rgb(174, 222, 255)',
                    opacity: 1,
                },
                data: [50, 50, 50, 50, 50],
            },
            {
                //下半截柱子
                name: '2020',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                    //lenged文本
                    opacity: 1,
                    color: function (params) {
                        return new Charts.graphic.LinearGradient(
                            0,
                            0,
                            1,
                            0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 111, 255)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(29, 227, 255)', // 100% 处的颜色
                                },
                            ],
                            false
                        );
                    },
                },
                data: [32.1, 20.2, 9.5, 4.2, 2.3],
            },
            {
                //数据圆片
                name: '',
                type: 'pictorialBar',
                symbolSize: [10, 20],
                symbolOffset: [5, 0], 
                z: 3,
                itemStyle: {
                    opacity: 1,
                    color: 'rgb(27, 140, 255)'
                },
                symbolPosition: 'end',
                data: [32.1, 20.2, 9.5, 4.2, 2.3],
                label: {
                    show: true,
                    position: 'left',
                    distance: -400,
                    formatter: '{c}%'
                },
            },
            // {
            //     //最左圆片
            //     name: '',
            //     type: 'pictorialBar',
            //     symbolSize: [10, 20],
            //     symbolOffset: [10, 0],
            //     z: 3,
            //     itemStyle: {
            //         opacity: 1,
            //         color: 'rgb(0, 111, 255)'
            //         //color: '#000'
            //     },
            //     symbolPosition: 'end',
            //     data: [1, 1, 1, 1, 1],
            // },
        ],
    };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = myChart.resize;
    }
    return{
        ...toRefs(data),
        chart
    }
    
}
}
</script>

<style>

</style>